<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>问卷星</title>
		
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
		.bigbox{
			width: 1455px;
			height: 750px;
			border: 1px solid black;
			background-image: url(img/bj.jpg);
		}	
		.box1{
			width: 1300px;
			height: 53px;
			position: relative;
			border: 1px solid transparent;
			
		}
		.box2{
			width: 300px;
			height: 30px;
			font-size: 20px;
			margin-right: 0px;
			margin-top: 1%;
			float: right;
			text-decoration: none;/* 去掉下划线 */
			border: 1px solid transparent;
			
			
		}
		.zcbox{
			width: 89px;
			height: 30px;
			float: left;
			margin-top: 0%;
			margin-left: 0%;
			color: white;
			border: 1px solid white;
			border-radius: 100px;
			text-decoration: none;
		}
		.zcbox:hover{
			border: 4px solid white;
			color: white;
			
		}
		.cbox1{
			width: 89px;
			height: 30px;
			float: left;
			margin-top: 10%;
			margin-left: 0%;
			color: white;
			text-align: center;
			border-radius: 100px;
			line-height:12px;
			font-size: 20px;
			text-decoration: none;
		}
		.cbox1:hover{
			font-size: 24px;
		}
		.fhbox{
			width: 120px;
			height: 30px;
			float: left;
			margin-top: -11%;
			margin-left: 70%;
			color: white;
			border: 1px solid white;
			border-radius: 100px;
			text-decoration: none;
		}
		.fhbox:hover{
			border: 4px solid white;
			color: white;
			
		}
		.cbox2{
			width: 120px;
			height: 30px;
			float: left;
			margin-top: 0%;
			margin-left: 0%;
			color: white;
			text-align: center;
			border-radius: 100px;
			line-height:29px;
			font-size: 20px;
			text-decoration: none;
		}
		.cbox2:hover{
			font-size: 24px;
		}
		.zbox{
			width: 450px;
			height: 550px;
			position: fixed;
			top: 15%;
			left: 50%;
			margin-left: -240px;
			z-index: 2px;
			border-radius: 12px;
			border-top-left-radius: 12px;
			border-top-right-radius: 12px;
			border-bottom-right-radius: 12px;
			border-bottom-left-radius: 12px;
			background-color:#FFF;
		}
		.boxw1{
			width: 390px;
			height: 70px;
			text-decoration: none;
			font-size: 20px;
			top:15%;
			padding: 15px;
			padding-top: 40px;
			box-sizing: border-box;
			color: black;
			}.boxww{
				width: 89px;
					height: 21px;
					float: left;
					margin-top: 0%;
					margin-left: 4%;
					color: grey;
					text-align: center;
					line-height:18px;
					font-size: 20px;
					text-decoration: none;
					border-bottom: transparent 2px solid;
				}
				.boxww:hover{
					color: black;
					font-size: 20px;
					border-bottom:orange 2px solid;
				}
				.boxwe{
					width: 103px;
						height: 21px;
						float: left;
						margin-top: 0%;
						margin-left: 4%;
						color: grey;
						text-align: center;
						line-height:18px;
						font-size: 20px;
						text-decoration: none;
						border-bottom: transparent 2px solid;
					}
					.boxwe:hover{
						color: black;
						font-size: 20px;
						border-bottom:orange 2px solid;
					}
			
			input:focus{
				outline: none;
			}
			.boxw2{
				width: 350px;
				height: 25px;
				padding: 1%;
				border: 1px  solid gainsboro;
				margin-left: 28px;
			}
			.boxw3{
				width: 350px;
				height: 25px;
				padding: 1%;
				border: 1px  solid gainsboro;
				margin-left: 28px;
				margin-top: 15px;
			}
			.boxw4{
				width: 350px;
				height: 25px;
				padding: 1%;
				margin-left: 28px;
				margin-top: 15px;
				display: flex;
				
				
			}
			.cbox{
				width: 150px;
				height: 50px;
				float: left;
				margin-top: 0%;
				margin-left: 26%;
				color: #000;
			}
			.cbox:hover{
				color: orange;
			}
			.box5{
				width: 350px;
				height: 25px;
				padding: 1%;
				margin-left: 28px;
				margin-top: 15px;
				background-color: orange;
				line-height: 25px;
				text-decoration: none;
			float: none;
			display: flex;
			}
			.box55{
				width: 50px;
				height: 20px;
				background-color: orange;
				margin: auto;
				text-decoration: none;
				color: white;
			}
			.box6{
				width: 70px;
				height: 25px;
				padding-top: 18px;/* 间距 */
				margin: auto;
				color: dodgerblue;
			}.box66{
				width: 70px;
				height: 25px;
				padding-top: 18px;/* 间距 */
				margin: auto;
				color: dodgerblue;
			}
			.box66:hover{
				color: mediumblue;
			}
			.dbox{
				width: 150px;
				height: 35px;
				margin: auto;
				color: #888888;
				text-align: center;
				float:left;
				line-height: 20px;
				margin-top: 6%;
				margin-left: 34%;
				}
				.dbox7{
					width: 126px;
					height:20px;
					float: left;
					margin-top: 9%;
					margin-left: -59%;
				}
				.dbox8{
					width: 118px;
					height:20px;
					float: right;
					margin-top: -5.5%;
					margin-right:10%;
				}
			.dbox1{
				position: relative;
				width: 360px;
				height: 68px;
				
				margin: auto;
				margin-top: 90px;
				display: flex;
			}
			.dbox2{
				width: 70px;
				height: 68px;
				float: left;
			}
			.dbox3{
				
				width: 70px;
				height: 68px;
				margin: auto;
				float: none;
			}
			.dbox4{
				width: 70px;
				height: 68px;
				float: right;
			}
	</style>
	</head>
	<body>
		<div class="bigbox">
		<div class="box1">
			<a href="log" class="#">
				<img src="img/wjx-logo@2x.png" width="130px" height="49px" alt="问卷星不止问卷调查/在线考试"
			</a>
			<div class="box2">
				<div class="zcbox">
				<a href="#" class="cbox1">注册</a></div>
				<div class="fhbox">
				<a href="#" class="cbox2">返回首页</a></div>
			</div>
		</div>
		<div class="zbox">
			<div class="boxw1">
				
				<a href="#" id="#" class="boxww">账号登录
				</a>
				<a href="#" id="#" class="boxwe">验证码登录 </a>
			</div>
			<div class="boxw2">
				<p><font color="gray">用户名/Email/手机</font></p>
			</div>
			<div class="boxw3"><p><font color="gray">请输入登录密码</font></p></div>
			<div id="#" class="boxw4">
				<input type="checkbox" name="gxh" /><p><font color="gray">下次自动登录</p></font>
				<a href="#" class="cbox" > 忘记用户名/密码？</a>
			</div>
			<div class="box5">
				<div class="box55"><a href="#" class="box55">登录</a></div>
			</div>
			<div class="box6"><a href="#" class="box66">立即注册</a></div>
			<div class="dbox">更多登录方式</div>
			<div class="dbox7"/><hr /></div>
			<div class="dbox8"><hr /></div>
			<div class="dbox1">
			<div class="dbox2"><img src="img/kk.png"/>QQ登录</div>
			<div class="dbox3"><img src="img/wx.png"/>微信登录</div>
			<div class="dbox4"><img src="img/qy.png"/>企业微信</div>
			</div>
		</div>
	</body>
</html>
